<template>
	<view class="loadQuery">
		<!--  -->
		<u-sticky>
			<!-- 搜索 -->
			<view class="top">
				<view class="top_l">
					<view class="left_int"></view>
					<input type="text" @click="$goBack('./loadSearch')" placeholder="请输入装货查询信息">
					<view class="right_int" @click="scan"></view>
				</view>
				<view class="t_button" @click="$goBack('./loadSearch')">搜索</view>
			</view>
		</u-sticky>
		<view class="" style="padding: 0 30rpx;">
			<!-- 列表 -->
			<view class="list">
				<view class="item" v-for="(item,i) in listData" :key="i">
					<view class="item_top">
						<view class="item_t_l">装货单号</view>
						<view class="item_t_r">{{item.loadNo}}</view>
					</view>
					<!-- 内容 -->
					<view class="item_cont" @click="goInfo(item,'0')">
						<view class="item_cont_i">
							<view class="item_cont_i_l">装货日期</view>
							<view class="item_cont_i_r">{{item.loadDate}}</view>
						</view>
						<view class="item_cont_i">
							<view class="item_cont_i_l">托运方名称</view>
							<view class="item_cont_i_r">{{item.carriageName}}</view>
						</view>
						<view class="item_cont_i">
							<view class="item_cont_i_l">危险货物名称</view>
							<view class="item_cont_i_r">{{item.dgsName}}</view>
						</view>
						<view class="item_cont_i">
							<view class="item_cont_i_l">重量</view>
							<view class="item_cont_i_r">{{item.loadWeight || '-'}}吨</view>
						</view>
						<view class="item_cont_i">
							<view class="item_cont_i_l">五必查结果</view>
							<view class="item_cont_i_r">{{item.checkResult == 'N'?'否':'是'}}</view>
						</view>
					</view>
					<!-- 操作 -->
					<view class="item_change" @click="goInfo(item,'1')">修改</view>
				</view>
				<u-loadmore :status="loadingStatus" />
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				msgForm: {},
				query: {
					current: 1,
					size: 10,
				},
				listData:[],
				loadingStatus:'loading'
			};
		},
		
		onLoad(option) {
		    // 获取查询表单信息
		    if(option.msgForm){
				this.msgForm = JSON.parse(decodeURIComponent(option.msgForm))
				console.log(this.msgForm,'表单数据');
			
			}
			//默认查询
			this.getData()
		},
		methods: {
			goInfo(row,type) {
				this.$store.commit('setloadFillData',{...row,changeType:type})
				this.$goBack(`./loadEdit`)
			},
			//分页查询
			getData(){
				this.loadingStatus = 'loading'
				this.$api.getLoadList({...this.msgForm,...this.query}).then(res => {
					console.log(res, '装货分页');
					this.listData = [...this.listData,...res.data.data.records]
					this.query.size = this.query.size+1
					// if(res.data.code!==200 || !res.data.data.records.length>0){
						
					// }
				})
				this.loadingStatus = 'nomore'
			},
			scan() {
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.$api.getLoadList({
							qrCode: res.result,
							current:1,
							size:10,
						}).then(res => {
							console.log(res, '装货查询扫码分页');
							this.listData = res.data.data.records
						})
					}
				});
			},
		},
		//上拉加载
		onReachBottom() {
			console.log('上拉加载');
			this.getData()
		},

	}
</script>

<style lang='scss' scoped>
	
	.top {
		width: calc(100% - 60rpx);
		/* background-color: pink; */
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		position: relative;
		.top_l {
			z-index: 2000;
			width: 487rpx;
			padding: 0 20rpx;
			height: 92rpx;
			display: flex;
			align-items: center;
			box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.31);
			background-color: #fff;
			border-radius: 10rpx;
			.left_int {
				width: 34rpx;
				height: 36rpx;
				background-image: url('/static/load_search.png');
				background-size: 100% 100%;
			}

			.right_int {
				width: 52rpx;
				height: 52rpx;
				background-image: url('/static/load_right.png');
				background-size: 100% 100%;
			}

			input {
				border: none;
				flex: 1;
				padding: 0 10rpx;
			}
		}

		.t_button {
			padding: 0;
			margin: 0;
			width: 120rpx;
			height: 92rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 1rpx 4rpx 1rpx rgba(200, 200, 200, 0.31);
			font-size: 28rpx;
			color: #007AFF;
			line-height: 92rpx;
			text-align: center;
			border-radius: 8rpx;
			border: none;
			z-index: 2000;
		}
	}
	.top::before{
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: 75rpx;
		background-color: #007AFF;
		z-index: 1000;
	}
	/* .top::after{
		position: absolute;
		content: '';
		bottom: 0;
		left: 0;
		width: 100%;
		height: 78rpx;
		background-color: #fff;
		z-index: 500;
	} */
	.item {
		width: calc(100% - 100rpx);
		padding: 0 50rpx 40rpx 50rpx;
		color: #333333;
		box-shadow: 0px 2px 8px 1px rgba(173, 173, 173, 0.19);
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
		.item_top {
			height: 100rpx;
			width: 100%;
			line-height: 100rpx;
			font-size: 30rpx;
			border-bottom: 2rpx solid #EEEEEE;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item_t_r {
				color: #007AFF;
			}
		}

		.item_cont {
			width: 100%;

			.item_cont_i {
				width: 100%;
				display: flex;
				padding: 10rpx 0;

				.item_cont_i_l {
					width: 180rpx;
					color: #666666;
				}

				.item_cont_i_r {
					flex: 1;
					text-align: right;
				}
			}
		}

		.item_change {
			width: 195rpx;
			height: 50rpx;
			background: #007AFF;
			color:#fff;
			border-radius: 30rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>
